<template>
     <div class="intro">
         <div class="title">{{ Data.houseName}}</div>
         <div class="tags">
           <div class="tag" v-for="item,index in Data.houseTags" :key="index">
             {{ item.tagText?.text}}
           </div>
         </div>
         <div class="comment">
            <div class="score">
               {{ Data.commentBrief.overall }}
               <div class="desc1">
                 {{  Data.commentBrief.scoreTitle }}
               </div>
            </div>
            <div class="desc2">
             {{ Data.commentBrief.commentBrief }}
            </div>
            <div class="count">
             {{ Data.commentBrief.totalCount }}条评论>
            </div>
        </div>
         <div class="address">
          <div class="adr">
            {{ Data.nearByPosition.address }}
          </div>
          <div class="surounding">
            地图·周边>
          </div>
         </div>
     </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useDetailstore } from "../../../../stores/modules/detailStore";
//获取数据并展示
import {defineProps,watch} from 'vue'
const props = defineProps({
    Data: {
        type: Object,
        default:{}
    }
})
 
</script>

<style lang="less" scoped>
.intro
{
    padding: 15px;
    .title
    {
        font-weight: 600;
        font-size: 20px;
        
    }

   .tags
   {
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;
     margin-top:5px;
     margin-bottom: 15px;
     font-size: 12px;
     color: rgb(255, 140, 0);
     .tag
     {
        margin-left: 3px;
        background-color: rgba(255,140,0,0.2);
        border-radius: 5px;
        line-height: 12px;
     }

   }

   //使用伪类设置样式
   .tags :first-child
   {
      font-size: 15px;
      line-height: 15px;
      background-color: #000;
      margin-left: 0px;
      border-radius: 0px;
      color: rgb(255, 221, 0);
     
   }

     .tags :last-child
     {
        color: aqua;
        background-color: rgba(0, 255, 166, 0.1);
     }

   .comment
   {
     display: flex;
     flex: 1;
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
     font-size: 14px;
     .score
     {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: 600;
        .desc1
        {
            margin-left: 5px;
           font-size: 14px;
           font-weight: 500;
        }
     }


     .desc2
     {
        color: #999;
     }

     .count
     {
         color: orange;
         background-color: rgba(255, 221, 0, 0.1);
     }
   }

   .address
   {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
     margin-top: 20px;
    .adr
    {
         width: 40vh;
         font-size: 14px;
         font-weight: 600;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;

    }

    .surounding
    {
       font-size: 12px;
       color: orange;
        background-color: rgba(255, 221, 0, 0.1);
    }
   }

}
</style>